import { Button, Col, Icon, Input, Row, Select } from "antd";
import styles from "../index.less"
import toRight from "@/assets/toRight.png"

const ApiTableConfig = props => {
  const { title1,title2,options1,options2,list,valueType1,valueType2,listType,
    changeOption,removeContent,addContent,specialFlag,
    fieldsList,apiList,changeFieldType 
  } = props;

  const renderApiResponseList = (apiId) => {
    let responseList = []
    for(const a of apiList){
      if(a.id == apiId){
        responseList = a.fieldList ? a.fieldList.filter(f => f.type == 2) : []
      }
    }

    return responseList.map(item => {
      return <Select.Option value={item.id} key={item.id}>{item.nameZh}</Select.Option>
    })
  }

  return (
    <div className={styles.apiTable}>
      <Row className={styles.tableTitle} type="flex" align="stretch">
        <Col span={10}>{title1}</Col>
        <Col span={4}></Col>
        <Col span={10}>{title2}</Col>
      </Row>
      {
        list.map((item,index) => {
          return (
            <Row type="flex" align="stretch" style={{border:"1px solid #E8E8E8",borderTop:"0",position:"relative"}}>
              <Col span={10} className={styles.leftCol} style={{minHeight:'40px',lineHeight:"40px"}}>
              {
                specialFlag ? (
                  <div>
                    <Select value={item.fieldType} onChange={(value) => changeOption(value,index,listType,'fieldType')}>
                      <Select.Option value={0}>表单字段</Select.Option>
                      <Select.Option value={1}>API查询接口字段</Select.Option>
                      <Select.Option value={2}>常量</Select.Option>
                    </Select>
                    {
                      item.fieldType == 0 ? (
                        <Select value={item.sendFieldId} onChange={(value) => changeOption(value,index,listType,'sendFieldId')}>
                          {
                            fieldsList.map(item => {
                              return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                            })
                          }
                        </Select>
                      ) : ''
                    }
                    {
                      item.fieldType == 1 ? (
                        <div>
                          <Select value={item.apiId} onChange={(value) => changeOption(value,index,listType,'apiId')}>
                            {
                              apiList.map(item => {
                                return <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                              })
                            }
                          </Select>
                          <Select value={item.sendFieldId} onChange={(value) => changeOption(value,index,listType,'sendFieldId')}>
                            {renderApiResponseList(item.apiId)}
                          </Select>
                        </div>
                      ) : ''
                    }
                    {
                      item.fieldType == 2 ? (
                        <Input style={{width:'90%'}} value={item.sendFieldId} onChange={(e) => changeOption(e.target.value,index,listType,'sendFieldId')} />
                      ) : ''
                    }
                  </div>
                ) : (
                  <Select value={item[valueType1]} onChange={(value) => changeOption(value,index,listType,valueType1)}>
                    {
                      options1.map(item => {
                        return valueType1 == 'apiFieldId' ? <Select.Option value={item.id} key={item.id}>{item.nameZh}</Select.Option> : <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                      })
                    }
                  </Select>
                )
              }
                
              </Col>
              <Col span={4} className={styles.centerCol}><img src={toRight} /> </Col>
              <Col span={10} className={styles.rightCol} style={{minHeight:'40px',lineHeight:"40px"}}>
                <Select value={item[valueType2]} onChange={(value) => changeOption(value,index,listType,valueType2)}>
                  {
                    options2.map(item => {
                      return valueType2 == 'apiFieldId' ? <Select.Option value={item.id} key={item.id}>{item.nameZh}</Select.Option> :  <Select.Option value={item.id} key={item.id}>{item.name}</Select.Option>
                    })
                  }
                </Select>
              </Col>
              {
                index != 0 ? (
                  <Icon type="close-circle" className={styles.removeIcon} onClick={() => removeContent(index,listType)} />
                ) : ''
              }
              
            </Row>
          )
        })
      }
      <div style={{textAlign:"left",color:"#3E5BFF"}}>
        <span style={{cursor:"pointer"}} onClick={() => addContent(listType)}><Icon type="plus-circle" className={styles.addIcon} />添加</span>
      </div>      
    </div>
  )
}

export default ApiTableConfig